<template>
<div style="margin-top: 50px;">
  <div ref="buildingRankChart" style="width:90%;margin-top:20px;height: 240px;background-repeat: no-repeat;background-size:auto 100%;" :style="'background-image: url(' + require('@/assets/img/content-bg.png') + ');'">
    <div style="height: 20px;"></div>
    <table style="width: 80%;margin-left: 25px;border: 0;">
      <tr style="border: 0;">
        <th style="border:0;width: 50px;color: rgb(149, 149, 150);">序号</th>
        <th style="border:0;width: 100px;color: rgb(149, 149, 150);">标题</th>
        <th style="border:0;width: 90px;color: rgb(149, 149, 150);">时间</th>
        <th width="420px" style="color: rgb(149, 149, 150);">内容</th>
      </tr>
      <tr v-for="(item,index) in list" :key="item.id" style="border: 0;">
        <td style="text-align: center;border:0;border-bottom: 1px solid rgba(255, 255, 255, 0.2);font-size: 14px;">{{ index + 1 }}</td>
        <td style="text-align: center;border:0;border-bottom: 1px solid rgba(255, 255, 255, 0.2);font-size: 14px;">{{ item.title }}</td>
        <td style="text-align: center;border:0;border-bottom: 1px solid rgba(255, 255, 255, 0.2);font-size: 14px;">{{ item.time }}</td>
        <td style="text-align: left;border:0;border-bottom: 1px solid rgba(255, 255, 255, 0.2);font-size: 14px;">{{ item.content }}</td>
      </tr>
    </table>
  </div>
  <div style="position: relative;float: left;top: -255px;left: 190px;font-size: 17px;height: 25px;font-style: italic;">
    告警事件
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      list: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  mounted() {
    this.fetchData()
    this.refreshData()
  },
  methods: {
    refreshData: function () {
      setInterval(this.fetchData, 10000)
    },
    fetchData: function () {
      const data = {
        content: {}
      }
      this.$axios({url:'/ems/client/fullscreen/warning', data: data}).then((content) => {
        this.list = content.list
        this.list.forEach(function (item) {
          if (item.content.length > 15) {
            item.content = item.content.substring(0, 15) + '...'
          }
        })
      })
    }
  }
}
</script>
